<template>
    <div id="elref">
      <button @click="getdom">获取dom对象</button>
      <div ref="mydiv" id="div1">div内容</div>

      <button @click="getcom">获取组件对象</button>
      <login ref="mycom">组件内容</login>
    </div>
</template>

<script>
    export default {
        name: "el-ref",
      methods:{
          getdom:function () {
            console.log(document.getElementById('div1').innerHTML);
            console.log(this.$refs.mydiv.innerHTML);
          },
        getcom:function () {
            console.log(this.$refs.mycom)
          console.log(this.$refs.mycom.subname);
        }
      },
      components:{
          'login':{
            data(){
              return{
                subname:'子组件名称'
              }
            },
            template:'<h1>这是一个子组件</h1>'
          }
      }
    }
</script>

<style scoped>

</style>
